<template>
    <WidgetContainer :widget-id="config.id">
        <div :style="{ width: config.attributes.width || '100%' }" :class="config.attributes?.cssClass">
            <div :style="{
                fontSize: config.attributes.titleFontSize,
                fontWeight: 'bold',
                color: config.attributes.titleColor,
                marginBottom: '4px',
            }">
                {{ config.attributes.title }}
            </div>
            <div :style="{
                fontSize: config.attributes.descFontSize,
                color: config.attributes.descColor,
            }">
                {{ config.attributes.description }}
            </div>
        </div>
    </WidgetContainer>
</template>

<script setup>
const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});
</script>